<template>
  <div id="app">
    <Topbar :key="topbarkey"></Topbar>
    <Header></Header>
    <router-view />
    <Footer></Footer>
    <!-- <button @click="fn">点击</button> -->
    <Login v-if="isShowLoginModal"></Login>
    <transition name="slide">
      <Toast v-show="isShow" />
    </transition>
    <div class="iconfont icon-toast-shibai_huaban"></div>
    <button @click="fn">点击请求</button>
  </div>
</template>

<script>
import Topbar from "./components/Topbar";
import Header from "./components/Header";
import Footer from "./components/Footer";
import Login from "./components/Login";
import Toast from "@/components/Toast";
import { JingPinAPI } from "./request/api";
import { mapState } from "vuex";

export default {
  components: {
    Topbar,
    Header,
    Footer,
    Login,
    Toast,
  },
  data() {
    return {
      topbarkey: 0,
    };
  },
  methods: {
    async fn() {
      let res1 = await JingPinAPI();
      console.log("app=res1:", res1);
      let res2 = await JingPinAPI();
      console.log("app=res1:", res2);
    },
  },
  watch: {
    "$route.path": {
      handler() {
        this.topbarkey++;
      },
    },
  },
  computed: {
    ...mapState({
      isShowLoginModal: (state) => state.showModal.isShowLoginModal,
      isShow: (state) => state.showToast.isShow,
    }),
  },
};
</script>

<style lang="less">
.slide-enter,
.slide-leave-to {
  opacity: 0;
}
.slide-enter-active,
.slide-leave-active {
  transition: opacity 0.5s linear;
}
.slide-enter-to,
.slide-leave {
  opacity: 1;
}
</style>
